<style lang="scss" scoped>
.left{
    padding-right: 30px;
    .title{
        font-size: 18px;
        font-weight: 600;
        line-height: 55px;
        justify-content: space-between;
        margin-right: 5%;
        span{
            color: rgba(97, 96, 96, 0.8);
            font-weight: normal;
        }
        select{
            width: 100%;
            height: 20px;
            width: 50px;
            line-height: 20px;
        }
    }   
    .padding2{
        width: 90% !important;
        margin: 0 5%;
    }
    .leitable{
        width: 100%;
        line-height: 50px;
        border-spacing: 0;
        .input_label{
            width: 120px;
            text-align: right;
        }
        .input_label_1{
            min-width: 70px;
            text-align: right;
        }
        .input_content{
            flex: 1;
            min-width: 100px;
            padding: 0 20px;
            input{
                width: 100%;
                line-height: 20px;
            }
            div{
                width: 100%;
            }
           
        }
        .input_content_1{
            input{
                width: 40%;
                margin: 0 20px;
                line-height: 20px;
            }
        }
        .chengcardbtn{
            width: 60px;
            height: 40px;
            margin-right: 10px;
        }
        .baikabtn{
            width: 60px;
            height: 40px;
            // background: #00978A;
            color: #ffffff;
        }
        .readbtn{
            width: 60px;
            height: 40px;
            // background: #00978A;
            color: #ffffff;
            margin-left: 20px;
        }
       
        .writebtn{
            width: 100%;
            height: 40px;
        }
        .tuidanbtn{
            width: 100%;
            height: 40px;
            // background: #00978A;
            color: #ffffff;
        }
        .updorderbtn{
            width: 100%;
            height: 40px;
            // background: #00978A;
            color: #ffffff;
        }
        
    }
    .btntable{
        td{
            div{
                padding: 0 20px;
            }
        }
    }
}
.right{
    .title{
        font-size: 18px;
        font-weight: 600;
        line-height: 55px;
        span{
            color: rgba(97, 96, 96, 0.8);
            font-weight: normal;
        }
    } 
    .leitable{
        width: 100%;
        line-height: 50px;
        border-spacing: 0;
        .icardimg{
            height: 150px;
            width: 320px;
            text-align: center;
            img{
                height:100%;
                width: auto;
            }
        }
        .imgname{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    }
}
</style>
<style lang="scss">
.msg{
    .msg_b{
        width: 90%;
        height: 40px;
        .msg_label{
            flex: 1;
            text-align: left;
        }
        .msg_content{
            flex: 2;
            text-align: left;
        }
    }
}
// .el-message-box__btns{
//     .el-button--primary{
//         background-color: #00978A !important;
//     }
// }
</style>
<template>
<div class="write_card fxcol">
    <div>
		<div class="title-box crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-tickets"></i>卡操作
				</el-breadcrumb-item>
				<el-breadcrumb-item>读写卡</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
    </div>
    <div class="fxrow fxss width100 height100">
        <div class="fxcol fxss fx1 left">
            <div class="width100 height100">
                <div class="title fxrow fxcc">
                    <div>
                        <span>——&nbsp;</span> 基本信息 <span>&nbsp;——</span>
                    </div>
                    <select v-model="format">
                        <option value="10010">联通</option>
                        <option value="10000">电信</option>
                    </select>
                </div>
                <table class="leitable padding2" border="1">
                    <tr>
                        <td class="input_label">会员名称：</td>
                        <td class="input_content"><input type="text" value="黄多多"></td>
                        <td class="input_label">订单状态：</td>
                        <td class="input_content"><div>{{cnstatus}}</div></td>
                    </tr>
                    <tr>
                        <td class="input_label">身份证号码：</td>
                        <td class="input_content"><input type="text" value="110222197803020823"></td>
                        <td class="input_label">渠道类型：</td>
                        <td class="input_content"><div>{{cnchannel}}</div></td>
                    </tr>
                    <tr>
                        <td class="input_label">证件地址：</td>
                        <td class="input_content"><input type="text" value="北京通州"></td>
                        <td class="input_label">购买渠道：</td>
                        <td class="input_content"><div>{{buychannel}}</div></td>
                    </tr>
                    <tr>
                        <td class="input_label">证件有效期：</td>
                        <td colspan="3" class="input_content_1"><input type="text" value="2014-09-23">至<input type="text" value="2024-09-22"></td>
                    </tr>
                    <tr>
                        <td class="input_label">已更改订单次数：</td>
                        <td colspan="3" class="input_content"><div>{{updtimes}}次</div></td>
                    </tr>
                </table>
                <div class="title" style="margin-top:20px;"><span>——&nbsp;</span> 写卡信息 <span>&nbsp;——</span></div>
                <table class="leitable padding2" border="1">
                    <tr>
                        <td class="input_label_1">号码：</td>
                        <td class="input_content">{{mobile}}</td>
                        <td class="input_label_1">归属地：</td>
                        <td class="input_content">{{area}}</td>
                        <td class="input_label_1">制式：</td>
                        <td class="input_content">{{format|format}}</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="input_content">
                            <div style="text-align:right;">
                                <el-button type="info" plain class="chengcardbtn">成卡</el-button>
                                <el-button type="primary" class="baikabtn">白卡</el-button>
                            </div>
                        </td>
                        <td colspan="4" class="input_content">
                            <div class="fxrow fxcc" style="width:100%;margin:0;">
                                <div style="fxcol fxcc fx1">
                                    <input type="text" placeholder="请点击按钮读取卡号" v-model="cardNo" style="background: rgba(97, 96, 96, 0.1);width:100%;line-height:25px;height:25px;margin:0;" />
                                </div>
                                <el-button type="primary" class="readbtn" @click="readCard()">读卡</el-button>
                            </div>
                        </td>
                    </tr>
                </table>
                <table class="leitable btntable" border="1" style="margin-top: 25px;width: 100%;">
                    <tr style="width: 100%;">
                        <td style="width:50%;">
                            <div>
                                <el-button type="primary" class="writebtn" @click="writeCard()">写卡</el-button>
                            </div>
                        </td>
                        <td style="width:20%;">
                            <div>
                                <el-button type="primary" class="tuidanbtn">退单</el-button>
                            </div>
                        </td>
                        <td style="width:40%;">
                            <div>
                                <el-button type="primary" class="updorderbtn">更改订单</el-button>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="fxcol fxss right">
            <div class="width100 height100">
                <div class="title"><span>——&nbsp;</span> 照片信息 <span>&nbsp;——</span></div>
                <table class="leitable" border="1">
                    <tr>
                        <td><div class="icardimg"><img :src="require('assets/image/icard_z.png')" alt=""></div></td>
                    </tr>
                    <tr>
                        <td class="imgname">身份证正面照</td>
                    </tr>
                    <tr>
                        <td><div class="icardimg"><img :src="require('assets/image/icard_f.png')" alt=""></div></td>
                    </tr>
                    <tr>
                        <td class="imgname">身份证反面照</td>
                    </tr>
                    <tr>
                        <td><div class="icardimg"><img :src="require('assets/image/mianguan.jpg')" alt=""></div></td>
                    </tr>
                    <tr>
                        <td class="imgname">免冠照片</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return{
            cnstatus:'未写卡',
            cnchannel: '自营',
            buychannel: '通信APP',
            updtimes: 3,
            mobile:'18610065161',
            cardNo: '',
            area: '大连',
            format: '10010'
        }
    },
    created(){

    },
    methods:{
        readCard(){
            this.$axios
                .post(this.httpRoot.CARD_SERVICE + this.format + "/read/",{},{
                    headers:{
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => { 
                    let data = res.data;
                    if (data.success) { 
                        this.cardNo = "" + data.data;
                    } else {
                        this.$error(data.message);
                    }
                })
                .catch(err =>  {
                    console.log(err);
                });
        },
        writeCard(){
            let jsonData = {
                'sequenceId': "20200515162600123456",
                'reqTime': "20200515162600",
                'mdn': "18610065161"
            };
            if(this.cardNo == undefined || this.cardNo == null || this.cardNo == "" || this.cardNo == "undefined" || this.cardNo == "null"){
                this.$error("请先读取卡号后再执行写卡！");
                return;
            }
            this.$util.loadingshow();
            this.$axios
                .post(this.httpRoot.CARD_SERVICE + this.format +"/"+ this.cardNo + "/20200515162600123456/20200515162600/18610065161/write/", {},{
                    headers:{
                        operator: this.$util.getLoginer().userid,
                    },
                    withCredentials: true
                })
                .then(res => {  
                    this.$util.loadinghide();
                    let data = res.data;
                    let msg = data.message;
                    let array = msg.split(";");
                    let content = `<div class="fxcol fxcc msg">`;
                    array.forEach(a=>{
                        if(a != undefined && a != null && a != ""){
                            let item = a.split(":");
                            content = content + `<div class="fxrow fxcc msg_b"><div class="fxrow fxss msg_label">` + item[0] + `：</div><div class="fxrow fxss msg_content">` + item[1] +"</div></div>";
                        }
                    });
                    content = content + "</div>";
                    this.$alert(content, '写卡结果', {
                        dangerouslyUseHTMLString: true,
                        center: true,
                        confirmButtonText: '确定',
                        closeOnClickModal: false
                    });
                })
                .catch(err =>  {
                    this.$util.loadinghide();
                    console.log(err);
                });
        },

    },
    filters:{
        format:(value)=>{
            if(value==null||value==undefined||value==""){
                return "";
            }else{
                switch(value){
                    case '10000': return "电信";
                    case '10010': return "联通";
                    default: return "";
                }
            }
        }
    }
}
</script>